<!DOCTYPE html>
<html>
<head>

	<meta charset='utf-8'/>
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="pragma" content="no-cache" />

	<script src="views/jquery.js"></script>
	<script src="views/Q.js"></script>
	<script src="views/spotify.js"></script>

	<script>
		var searchQ = '<!--QUERY-->';
		var searchT = "<!--TYPE-->";

		var api = new SpotifyWebApi();
		api.setPromiseImplementation(Q);

		var qId = '';

		function songSearch(query) {
			api.searchTracks(query)
				.then(function(data) {

					// first result
					var result = data.tracks.items[0];

					// album cover
					$('#cover').attr('src', result.album.images[1].url);
					$('#head').append(result.name);
					$('#sub').append('by ' + result.artists[0].name);
					$('#subsub').append('Song on Spotify');

					qId = result.uri;
				}, function(err) {
					console.error(err);
				});
		}

		function albumSearch(query) {
			api.searchAlbums(query)
				.then(function(data) {

					// get first album
					var result = data.albums.items[0];
					qId = result.id;

					return qId;
				})
				.then(function(albumId) {
					api.getAlbum(albumId)
						.then(function(data) {

							// album cover
							$('#cover').attr('src', data.images[1].url);
							$('#head').append(data.name);
							$('#sub').append('by ' + data.artists[0].name);
							$('#subsub').text('Album on Spotify');

							qId = data.uri;
						}, function(err) {
							console.error(err);
						});
				}, function(err) {
					console.error(err);
				});
		}

		function output() {
			return qId;
		}

		$(function() {
			if(searchT == "song" || searchT == "track") {
				songSearch(searchQ);
			} else if(searchT == "album" || searchT == "ep") {
				albumSearch(searchQ);
			}
		});

	</script>

	<style>
	html, body, body > div {
		margin: 0;
		width: 100%;
		height: 100%;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
		line-height: 1.2;
		text-align: center;
	}

	.dark {
		color: #eee;
	}

	.light {
		color: #000;
	}

	.abs {
		position: absolute;
		top: 10%;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	#wrapper {
		position: relative;
	}

	#cover {
		width: 225px;
		height: 225px;
	}

	#head {
		font-size: 24px;
	}

	#sub, #subsub {
		font-size: 12px;
	}
	</style>

</head>
<body>

	<div id="wrapper" class="<!--THEME-->">
		<div class="abs">
			<img id="cover">
			<div id="head">
			</div>
			<div id="sub">
			</div>
			<div id="subsub">
			</div>
		</div>
	</div>

</body>
</html>